<template>
  <div class="caidan">
    <el-menu
      :default-active="pathActive"
      :unique-opened="true"
      class="el-menu-vertical-demo"
      active-text-color="#2978FF"
      router
    >
      <el-menu-item index="/welcome">
        <i class="el-icon-user"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-tickets"></i>
          <span>商品列表</span>
        </template>
        <el-menu-item-group>
          <!-- <el-menu-item index="/shopSystem/allShop/shop_list">
            <template slot="title">
              <span>附近商品列表</span>
            </template>
          </el-menu-item> -->
          <el-menu-item index="/shopSystem/allShop/shop_list_offline">
            <template slot="title">
              <span>电商商品列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/shopSystem/allShop/voucher/voucher_list">
            <template slot="title">
              <span>代金券</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/shopSystem/allShop/meal/meal_list">
            <template slot="title">
              <span>套餐</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- <el-menu-item index="/shopSystem/allShop/shop_list">
        <i class="el-icon-tickets"></i>
        <span slot="title">商品列表</span>
      </el-menu-item> -->
      <!-- <el-menu-item index="/shopSystem/allShop/shop_classification">
        <i class="el-icon-document-remove"></i>
        <span slot="title">附近商品分类</span>
      </el-menu-item> -->
      <el-menu-item index="/shopSystem/allShop/shop_comment">
        <i class="el-icon-edit"></i>
        <span slot="title">商品评论</span>
      </el-menu-item>
      <el-menu-item index="/shopSystem/order/online_order">
        <i class="el-icon-notebook-2"></i>
        <span slot="title">电商订单</span>
      </el-menu-item>
      <el-menu-item index="/shopSystem/order/offline_order">
        <i class="el-icon-notebook-2"></i>
        <span slot="title">线下订单</span>
      </el-menu-item>
      <el-menu-item index="/agent/order_list">
        <i class="el-icon-date"></i>
        <span slot="title">代理订单</span>
      </el-menu-item>
      <!-- <el-menu-item index="/shopSystem/order/offline_order">
        <i class="el-icon-full-screen"></i>
        <span slot="title">扫一扫订单</span>
      </el-menu-item> -->
      <el-menu-item index="/merchant/shop_list">
        <i class="el-icon-shopping-bag-1"></i>
        <span slot="title">我的店铺</span>
      </el-menu-item>
      <el-menu-item index="/merchant/transaction_flow">
        <i class="el-icon-tickets"></i>
        <span slot="title">交易流水</span>
      </el-menu-item>
      <el-menu-item index="/merchant/transaction_settlement">
        <i class="el-icon-set-up"></i>
        <span slot="title">交易结算</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-coin"></i>
          <span>积分券管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/score/record_list">
            <template slot="title">
              <span>充值记录</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/score/distribute_list">
            <template slot="title">
              <span>分发记录</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/score/operation">
            <template slot="title">
              <span>分发操作</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-office-building"></i>
          <span>我的酒店</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/myhotel/hotelInfo/index">
            <template slot="title">
              <span>酒店信息</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/myhotel/roomType/room_type_list">
            <template slot="title">
              <span>房型列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/myhotel/order/checkIn_list">
            <template slot="title">
              <span>入住订单</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/chat/chat_list">
        <i class="el-icon-set-up"></i>
        <span slot="title">聊天列表</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      pathActive: "",
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        this.pathActive = to.path;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.caidan {
  height: 100%;
}
.el-menu {
  border-right: transparent !important;
  background-color: $color-primary7;
  height: calc(100vh - 60px);
  overflow: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .el-menu-item {
    height: 55px;
    line-height: 55px;
    color: #cccccc;
    text-align: start;
    span {
      font-size: 13px;
    }
    i {
      margin-right: 14px;
    }
    &:hover {
      i {
        color: $color-primary1;
      }
    }
    .secon {
      background-color: #2978ff;
    }
  }
  .el-submenu {
    background-color: $color-primary7;
    span {
      font-size: 13px;
    }
    /deep/.el-menu-item {
      padding-left: 60px !important;
      background-color: #000c17 !important;
    }
    /deep/.el-menu--inline {
      background-color: $color-primary7;
    }
    /deep/.el-submenu__title:hover {
      background-color: $color-primary7;
    }
    /deep/.el-submenu__title {
      color: #ccc;
      text-align: start;
      i {
        margin-right: 14px;
      }
      &:hover {
        color: $color-primary1;
        i {
          color: $color-primary1;
        }
      }
    }
    /deep/.el-menu-item-group {
      background-color: #000c17 !important;
    }
    .el-menu-item:hover {
      background-color: #000c17;
    }
    /deep/.el-menu-item-group__title {
      padding: 0;
    }
  }

  &::-webkit-scrollbar {
    width: 0;
  }

  .el-menu-item:hover {
    color: #2978ff;
    .secon {
      background-color: #2978ff;
    }
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: $color-primary7;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-menu-vertical-demo {
    background-color: $color-primary7;
    color: #cccccc;
    .menuImg {
      margin-right: 15px;
    }
  }
}
</style>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* height: 100vh; */
}
</style>
